<template>
  <div class="reactive-layout-item-form">
    <Tabs size="small">
      <TabPane label="基本配置" style="padding-top: 10px;">
        <Form :label-width="105">
          <FormItem label="布局块ID">
            <i-input size="small" v-model="id" readonly>
              <Button title="复制" slot="append" v-clipboard="idClipOptions"><Icon type="md-copy" /></Button>
            </i-input>
          </FormItem>
          <FormItem label="自定义Class">
            <i-input size="small" v-model="className">
              <Button title="复制" slot="append" v-clipboard="classNameClipOptions"><Icon type="md-copy" /></Button>
            </i-input>
          </FormItem>
          <FormItem label="布局块名称">
            <Input size="small" v-model="layoutItemAliasName" placeholder="定义此布局块的备注名称"/>
          </FormItem>
          <FormItem :label-width="0">
            <FormItemPanel title="尺寸">
            <Table size="small" :columns="[{title:'占用列数',key:'w',align:'center'},{title:'占用行数',key:'h',align:'center'},{title:'高度(px)',key:'height',align:'center'}]"
                   :data="[
                     {'w':w,'h':h,'height':h*pageMetadata.layout.layoutConfigData.rowHeight}
                   ]"></Table>
            </FormItemPanel>
          </FormItem>
          <FormItem label="允许拖拽">
            <i-switch v-model="draggableEnabled"></i-switch>
          </FormItem>
          <FormItem label="静止不动">
            <Tooltip content="开启后，当前布局块将不可移动和调整尺寸，且不受其他布局块的移动而改变位置" :max-width="200" placement="left">
              <i-switch v-model="isStatic"></i-switch>
            </Tooltip>
          </FormItem>
          <FormItem label="是否显示">
            <i-switch v-model="display" :true-value="'block'" :false-value="'none'"></i-switch>
          </FormItem>
          <FormItem label="透明度">
            <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="opacity"></InputNumber>
          </FormItem>

          <FormItemPanel title="布局块背景图片">
            <UploadImageButton v-model="imageRelativePath" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>

            <FormItem label="相对路径">
              <i-input size="small" v-model="imageRelativePath">
                <Button slot="append" icon="md-close" @click="imageRelativePath = ''"></Button>
              </i-input>
            </FormItem>
            <FormItem label="背景重复">
              <Select :transfer="true" size="small" v-model="imageRepeat">
                <Option v-for="item in $PnDict.backgroundRepeats" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="背景图尺寸">
              <Input size="small" v-model="imageSize" placeholder="参考CSS的background-size"/>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
      <TabPane label="扩展样式" style="padding-top: 5px;">
        <Form :label-width="105">
          <FormItem label="背景颜色">
            <PnColorPicker size="small" v-model="backgroundColor" alpha recommend/>
          </FormItem>
          <FormItem label="内边距">
            <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="padding"></InputNumber> px
          </FormItem>

          <FormItemPanel title="边框">
            <FormItem label="边框宽度">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderWidth"></InputNumber> px
            </FormItem>
            <FormItem label="边框类型">
              <Select size="small" v-model="borderStyle">
                <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="圆角-上左">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderTopLeftRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-上右">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderTopRightRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-下右">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderBottomLeftRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-下左">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderBottomRightRadius"></InputNumber> px
            </FormItem>
          </FormItemPanel>

          <FormItemPanel title="阴影">
            <FormItem label="内阴影">
              <i-switch v-model="boxShadowInset">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="水平位移">
              <InputNumber size="small" :max="100" :min="-100" :step="1" v-model="boxShadowLeft"></InputNumber> px
            </FormItem>
            <FormItem label="垂直位移">
              <InputNumber size="small" :max="100" :min="-100" :step="1" v-model="boxShadowTop"></InputNumber> px
            </FormItem>
            <FormItem label="模糊半径">
              <InputNumber size="small" :max="100" :min="0" :step="1" v-model="boxShadowRadius"></InputNumber> px
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="boxShadowColor" alpha recommend/>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
      <TabPane label="旋转过渡" style="padding-top: 5px;">
        <Form :label-width="105">
          <FormItemPanel title="2D旋转">
            <FormItem label="旋转角度">
              <Slider size="small" v-model="rotationAngle" :max="360" :min="0"></Slider>
            </FormItem>
            <FormItem label="水平翻转">
              <i-switch v-model="flipHorizontal">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="垂直翻转">
              <i-switch v-model="flipVertical">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel title="3D旋转">
            <FormItem label="启用">
              <i-switch v-model="use3dRotate">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="旋转轴">
              <Select :transfer="true" size="small" v-model="axisOfRotation">
                <Option v-for="item in axisOfRotations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="旋转角度">
              <Slider size="small" v-model="rotationAngleFor3d" :max="180" :min="-180"></Slider>
            </FormItem>
            <FormItem label="透视距离">
              <InputNumber size="small" :max="2000" :min="100" v-model="perspectiveFor3d"></InputNumber>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel title="过渡动画">
            <FormItem label="启用">
              <i-switch v-model="animationVisible">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="延时时间">
              <Select transfer size="small" v-model="animationDelay" clearable>
                <Option v-for="item in $PnDict.animationDelayClass" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="进场动画">
              <Select transfer size="small" v-model="inAnimation" clearable>
                <Option v-for="item in $PnDict.inAnimations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="出场动画">
              <Select transfer size="small" v-model="outAnimation" clearable>
                <Option v-for="item in $PnDict.outAnimations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getLayoutItem',
  mutationType: 'designer/updateLayoutItem',
});
export default {
  name: "ReactiveLayoutItemForm",
  props: {},
  data() {
    return {
      axisOfRotations: [
        {
          label: 'x轴',
          value: 'x'
        },
        {
          label: 'y轴',
          value: 'y'
        }
      ],
    }
  },
  mounted() {

  },
  methods: {},
  computed: {
    ...mapFields({
      id: 'id',
      layoutItemName: 'name',
      layoutItemAliasName: 'aliasName',
      layoutItemConfigData: 'layoutItemConfigData',

      className: 'layoutItemConfigData.className',

      w: 'layoutItemConfigData.w',
      h: 'layoutItemConfigData.h',
      x: 'layoutItemConfigData.x',
      y: 'layoutItemConfigData.y',

      draggableEnabled: 'layoutItemConfigData.draggableEnabled',
      resizableEnabled: 'layoutItemConfigData.resizableEnabled',
      isStatic: 'layoutItemConfigData.isStatic',
      dragIgnoreFrom: 'layoutItemConfigData.dragIgnoreFrom',

      backgroundColor: 'layoutItemConfigData.backgroundColor',
      padding: 'layoutItemConfigData.padding',

      borderWidth: 'layoutItemConfigData.borderWidth',
      borderStyle: 'layoutItemConfigData.borderStyle',
      borderColor: 'layoutItemConfigData.borderColor',

      borderTopLeftRadius: 'layoutItemConfigData.borderTopLeftRadius',
      borderTopRightRadius: 'layoutItemConfigData.borderTopRightRadius',
      borderBottomLeftRadius: 'layoutItemConfigData.borderBottomLeftRadius',
      borderBottomRightRadius: 'layoutItemConfigData.borderBottomRightRadius',

      boxShadowInset: 'layoutItemConfigData.boxShadowInset',
      boxShadowLeft: 'layoutItemConfigData.boxShadowLeft',
      boxShadowTop: 'layoutItemConfigData.boxShadowTop',
      boxShadowRadius: 'layoutItemConfigData.boxShadowRadius',
      boxShadowColor: 'layoutItemConfigData.boxShadowColor',

      zIndex: 'layoutItemConfigData.zIndex',

      animationVisible: 'layoutItemConfigData.animationVisible',
      animationDelay: 'layoutItemConfigData.animationDelay',
      inAnimation: 'layoutItemConfigData.inAnimation',
      outAnimation: 'layoutItemConfigData.outAnimation',

      rotationAngle: 'layoutItemConfigData.rotationAngle',
      flipHorizontal: 'layoutItemConfigData.flipHorizontal',
      flipVertical: 'layoutItemConfigData.flipVertical',

      use3dRotate: 'layoutItemConfigData.use3dRotate',
      axisOfRotation: 'layoutItemConfigData.axisOfRotation',
      rotationAngleFor3d: 'layoutItemConfigData.rotationAngleFor3d',
      perspectiveFor3d: 'layoutItemConfigData.perspectiveFor3d',

      opacity: 'layoutItemConfigData.opacity',
      display: 'layoutItemConfigData.display',

      customStyleCode: 'layoutItemConfigData.customStyleCode',

      imageRelativePath: 'layoutItemConfigData.imageRelativePath',
      imageRepeat: 'layoutItemConfigData.imageRepeat',
      imageSize: 'layoutItemConfigData.imageSize',

    }),
    idClipOptions () {
      return {
        value: this.id,
        success: () => {
          this.$Message.success('复制成功')
        },
        error: () => {
          this.$Message.error('复制失败')
        }
      }
    },
    classNameClipOptions () {
      return {
        value: this.className,
        success: () => {
          this.$Message.success('复制成功')
        },
        error: () => {
          this.$Message.error('复制失败')
        }
      }
    },
    pageMetadata () {
      return this.$store.getters['designer/getPageMetadata']
    }
  },
  watch: {}
}
</script>

<style scoped>
.reactive-layout-item-form {
  /*margin-left: -16px;*/
  /*margin-right: -16px;*/
  /*margin-bottom: -16px;*/
  margin-top: -10px;
  margin-bottom: -10px;
}
.ivu-form-item {
  margin-bottom: 0px;
}
</style>
